<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/includes/header.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><fmt:message key="register_page"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://twitter.github.com/bootstrap/assets/css/docs.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/main.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
	<%@include file="/includes/navbar.jsp"%>

	<div class="container">
		<div class="row-fluid">
			<div class="span8">
				<form class="form-horizontal" id="registerHere" method='post' action="${pageContext.request.contextPath}/RegisterController">
					<fieldset>
						<legend><fmt:message key="registration"/></legend>
						
						<div class="control-group">
							<label class="control-label" for="input01"><fmt:message key="first_name"/></label>
							<div class="controls">
								<input type="text" class="input-xlarge" id="first_name"
									name="first_name" rel="popover"
									data-content="<fmt:message key="message.fName"/>"
									data-original-title="<fmt:message key="firstname.info"/>" />
							</div>
						</div>
						
						<div class="control-group">
							<label class="control-label" for="input01"><fmt:message key="last_name"/></label>
							<div class="controls">
								<input type="text" class="input-xlarge" id="last_name"
									name="last_name" rel="popover"
									data-content="<fmt:message key="message.lName"/>"
									data-original-title="<fmt:message key="lastname.info"/>" />

							</div>
						</div>
						
						<div class="control-group">
							<label class="control-label" for="input01"><fmt:message key="user_name"/></label>
							<div class="controls">
								<input type="text" class="input-xlarge" id="user_name"
									name="user_name" rel="popover"
									data-content="<fmt:message key="message.uName"/>"
									data-original-title="<fmt:message key="username.info"/>" />

							</div>
						</div>

						<div class="control-group">
							<label class="control-label" for="input01"><fmt:message key="email"/></label>
							<div class="controls">
								<input type="text" class="input-xlarge" id="user_email"
									name="user_email" rel="popover"
									data-content="<fmt:message key="message.email"/>"
									data-original-title="<fmt:message key="emaili.nfo"/>" />

							</div>
						</div>

						<div class="control-group">
							<label class="control-label" for="input01"><fmt:message key="password"/></label>
							<div class="controls">
								<input type="password" class="input-xlarge" id="user_password" name="user_password"
									rel="popover" 
									data-content="<fmt:message key="message.pass"/>"
									data-original-title="<fmt:message key="password.info"/>" />

							</div>
						</div>
						
						<div class="control-group">
							<label class="control-label" for="input01"><fmt:message key="confirm_password"/></label>
							<div class="controls">
								<input type="password" class="input-xlarge" id="user_passwordc"
									name="user_passwordc" rel="popover"
									data-content="<fmt:message key="message.rePass"/>"
									data-original-title="<fmt:message key="repassword.info"/>" />

							</div>
						</div>

						<div class="control-group">
							<label class="control-label" for="input01"><fmt:message key="gender"/></label>
							<div class="controls">
								<select name="gender" id="gender">
									<option value=""><fmt:message key="select"/></option>
									<option value="m"><fmt:message key="gender.male"/></option>
									<option value="f"><fmt:message key="gender.female"/></option>
								</select>

							</div>
						</div>

						<div class="control-group">
							<label class="control-label" for="input01"></label>
							<div class="controls">
								<button type="submit" class="btn btn-success" rel="tooltip"
									title="first tooltip"><fmt:message key="create_account"/></button>
							</div>
						</div>
						
						<hr />
					</fieldset>
				</form>
			</div>
		</div>
		
		<c:if test="${message != null}">
			<div class="alert alert-error">${message}</div>
		</c:if>	
	</div>
</body>

<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script
		src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
	<script
		src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
	<script
		src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
	<script
		src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
	<script
		src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
	<script
		src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
	<script
		src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
	<script
		src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
	<script type="text/javascript"
		src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
			
	<script type="text/javascript">
		var submit = false;	
	
		$(document).ready(function() {
			$('input').hover(function() {
				$(this).popover('show');
			});
			
			/* $("#user_name").blur(function(){
				$.ajax({
					type:"POST",
					url:"CheckUserController",
					data:{userName:$("#uName").val(), pass:$("#pass").val()},
					success:function(data){
						submit = Boolean(data);
					}
				});
			}); */
			
			$("#registerHere").validate({
				rules : {
					user_name : "required",
					first_name: "required",
					last_name: "required",
	
					user_email : {
						required : true,
						email : true
					},
					
					user_password : {
						required : true,
						minlength : 6
					},
					
					user_passwordc : {
						required : true,
						equalTo : "#user_password"
					},
					
					gender : "required"
				},
				
				messages : {
					user_name : "<fmt:message key="message.uName.error"/>",
					first_name: "<fmt:message key="message.fName.error"/>",
					last_name: "<fmt:message key="message.lName.error"/>",
					
					user_email : {
						required : "<fmt:message key="message.email.error"/>",
						email : "<fmt:message key="message.email.validate"/>"
					},
					
					user_password : {
						required : "<fmt:message key="message.pass.error"/>",
						minlength : "<fmt:message key="message.pass.min.characters"/>"
					},
					
					user_passwordc : {
						required : "<fmt:message key="message.rePass.error"/>",
						equalTo : "<fmt:message key="message.passc.match"/>"
					},
					
					gender : "<fmt:message key="message.gender.error"/>"
				},
				
				errorClass : "help-inline",
				errorElement : "span",
				
				highlight : function(element, errorClass, validClass) {
					$(element).parents('.control-group').addClass('error');
				},
				
				unhighlight : function(element, errorClass, validClass) {
					$(element).parents('.control-group').removeClass('error');
					$(element).parents('.control-group').addClass('success');
				}
			});
		});
	</script>
</html>